<template>
  <div v-title data-title="新产品销值">
    <div class="cascade">
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">年份：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of yearList"
            :key="item.code"
            :class="['hoverShow', { active: searchYear == item.code }]"
            @click="handleToggle(item.code, 'searchYear', 'search')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">产品大类：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of productCategoryList"
            :key="item.code"
            :class="['hoverShow', { active: productCategory == item.code }]"
            @click="handleToggle(item.code, 'productCategory')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">成品：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of htProductList"
            :key="item.code"
            :class="['hoverShow', { active: htProduct == item.code }]"
            @click="handleToggle(item.code, 'htProduct')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="projec-class-box clearFix" :class="{ 'project-class-more': more.moreRef1Class }" ref="moreRef1">
        <div class="projec-class-lable m120">规格：</div>
        <ul class="projec-class-list clearFix" :class="{ 'projec-class-list-more': more.moreRef1 }">
          <li
            v-for="item of productSpecList"
            :key="item.code"
            :class="['hoverShow', { active: productSpec == item.code }]"
            @click="handleToggle(item.code, 'productSpec')"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="btn-more" @click="changeMore('moreRef1')">
          更多<a-icon
            :class="['icon-child-down', { 'icon-child-up': more.moreRef1 }]"
            slot="suffixIcon"
            type="caret-up"
          />
        </div>
      </div>
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">产品：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of htProductList"
            :key="item.code"
            :class="['hoverShow', { active: htProduct == item.code }]"
            @click="handleToggle(item.code, 'htProduct')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="table-map">
      <a-row style="margin-bottom: 15px" type="flex" justify="space-between" align="middle">
        <a-col :span="6">
          <a-input-search placeholder="输入物料编号/名称进行搜索" v-model="keyword" @search="handleSearch" allowClear />
        </a-col>
        <a-col>
          <a-tooltip>
            <template slot="title">
              点击查询
            </template>
            <a-button :type="searchType ? 'primary' : 'default'" @click="buttonClick" style="margin-right:15px;" :loading="tableLoading">{{ searchType ? '按年' : '按月' }}</a-button
          >
          </a-tooltip>
          
        </a-col>
      </a-row>
      <a-table
        class="hte-table-content"
        :columns="levelColumns"
        :data-source="listData"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :loading="tableLoading"
        :pagination="ipagination"
        bordered
        @change="handleTableChange"
      >
      </a-table>
    </div>
  </div>
</template>

<script>
import { ResizeHandleMoreMixin } from '@/mixins/ResizeHandleMoreMixin'
import { getAction, postAction, downloadFileLink } from '@/api/manage'
import moment from 'moment'
import Vue from 'vue'

export default {
  name: 'ProductSaleValue',
  mixins: [ResizeHandleMoreMixin],
  data() {
    return {
      productCategoryList: [],
      productSpecList: [],
      htProductList: [],
      levelColumns: [
        {
          title: '物料编号',
          dataIndex: 'materialNo',
          key: 'materialNo',
          width: '15%',
          align: 'center',
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          key: 'materialName',
          width: '15%',
          align: 'center',
        },
        {
          title: '2020年累计箱数（箱）',
          dataIndex: 'boxNum1',
          key: 'boxNum1',
          align: 'center',
          width: '10%',
          sorter: (a, b) => a.boxNum1 - b.boxNum1,
        },
        {
          title: '2020年累计销值（万元）',
          dataIndex: 'saleNum1',
          key: 'saleNum1',
          align: 'center',
          width: '10%',
          sorter: (a, b) => a.saleNum1 - b.saleNum1,
        },
        {
          title: '2021年累计箱数（箱）',
          dataIndex: 'boxNum2',
          key: 'boxNum2',
          align: 'center',
          width: '10%',
          sorter: (a, b) => a.boxNum2 - b.boxNum2,
        },
        {
          title: '2021年累计销值（万元）',
          dataIndex: 'saleNum2',
          key: 'saleNum2',
          align: 'center',
          width: '10%',
          sorter: (a, b) => a.saleNum2 - b.saleNum2,
        },
        {
          title: '累计销值（万元）',
          dataIndex: 'saleSumNum',
          key: 'saleSumNum',
          align: 'center',
          width: '15%',
          sorter: (a, b) => a.saleSumNum - b.saleSumNum,
        },
        {
          title: '截止今天未分单的ATP库存（箱）',
          dataIndex: 'atpBoxNum',
          key: 'atpBoxNum',
          align: 'center',
          width: '15%',
          sorter: (a, b) => a.atpBoxNum - b.atpBoxNum,
        },
      ],
      listData: [],
      tableLoading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: false,
        total: 0,
      },
      keyword: '',
      productCategory: '',
      productSpec: '',
      htProduct: '',
      searchYear: '',
      yearList: [],
      searchType: 1,
      url: {
        codeInfoList: '/manage/codeInfo/list',
      },
    }
  },
  mounted() {
    this.initCodeInfo()
    this.initData()
  },
  methods: {
    initCodeInfo() {
      let year = parseInt(moment().format('YYYY'))
      this.searchYear = ''
      this.yearList.push({ code: '', name: '全部' })
      for (var i = 0; i < 5; i++) {
        if (year - i < 2020) {
          break
        }
        this.yearList.push({ code: year - i + '', name: year - i })
      }
      getAction(this.url.codeInfoList, {
        type: '产品规格',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.productSpecList = res.result.records || []
            this.productSpecList.splice(0, 0, { code: '', name: '全部', type: '产品规格', isdel: '0', parentid: '' })
          } else {
            this.$message.warning('查询产品规格失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询产品规格失败:' + res.message)
        })
      getAction(this.url.codeInfoList, {
        type: '产品大类',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.productCategoryList = res.result.records || []
            this.productCategoryList.splice(0, 0, {
              code: '',
              name: '全部',
              type: '产品大类',
              isdel: '0',
              parentid: '',
            })
          } else {
            this.$message.warning('查询产品大类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询产品大类失败:' + res.message)
        })
      getAction(this.url.codeInfoList, {
        type: '海天产品',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.htProductList = res.result.records || []
            this.htProductList.splice(0, 0, { code: '', name: '全部', type: '海天产品', isdel: '0', parentid: '' })
          } else {
            this.$message.warning('查询海天产品失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询海天产品失败:' + res.message)
        })
    },
    handleToggle(code, codeRef, type) {
      if (this.tableLoading) {
        return
      }
      this[codeRef] = code
      this.initData()
    },
    handleTableChange(pagination, filters, sorter) {
      if (this.tableLoading) {
        return
      }
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.initData()
    },
    handleSearch() {
      if (this.tableLoading) {
        return
      }
      this.ipagination.current = 1
      this.initData()
    },
    buttonClick() {
      if (this.tableLoading) {
        return
      }
      this.searchType = this.searchType == 1 ? 0 : 1
      this.ipagination.current = 1
      this.initData()
    },
    initData() {
      if (this.tableLoading) {
        return
      }
      this.tableLoading = true
      getAction('/techProjectReport/productSaleList', {
        keyword: this.keyword,
        productSpec: this.productSpec,
        productCategory: this.productCategory,
        htProduct: this.htProduct,
        searchYear: this.searchYear,
        searchType: this.searchType,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      })
        .then((res) => {
          if (res.code === 200 && res.result) {
            //this.listData = res.result.records
            this.listData = [
              { materialNo: 'QAQ', materialName: 10, boxNum1: 1 },
              { materialNo: 'QAQ2', materialName: 5, saleNum1: 2 },
            ]
            this.ipagination.total = res.result.total
          } else {
            this.$message.error(res.message)
            this.ipagination.total = 0
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    }
  },
}
</script>

<style lang="less" scoped>
@import '../productCycle.less';
.cascade {
  margin: 18px 0 20px 0 !important;
}
.table-map {
  background-color: #fff;
  padding: 15px;
}
</style>